<!DOCTYPE html>
<html>
<head>
    <title>透视投影照相机</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
<script>
    function init(){
        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();
        //正交投影照相机：设置起来较为直观
        //PerspectiveCamera(fov,aspect,near,far) fov是视景竖直方向上的张角; aspect=width/height; near最近距离; far最远距离
        var camera = new THREE.PerspectiveCamera(60,800/600,1,10);
        camera.position.set(0,0,5);
        scene.add(camera);
        //在原点创建一个边长为1的正方体，为了和透视效果做对比，这里我们使用wireframe
        var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),
                                new THREE.MeshBasicMaterial({
                                    color:0xff0000,
                                    wireframe:true
                                }));
        scene.add(cube);

        renderer.render(scene,camera);
    }
</script>
</html>